<template>
  <div class="ub ub-ver bg_w innerBox pad_t0">
    <div class="ub mar_05 h_3 ub-ac ub-pj bs_bb">
      <input type="number" placeholder="手机号" class="ub ub-f1" :value="this.$store.state.forgetPd.phone" @input="phoneChange">
      <div class="ub-img1 clear_icon" @click='clearClick' v-show="this.$store.state.forgetPd.phone"></div>
    </div>
    <div class="ub mar_05 h_3 ub-ac bs_bb">
      <input placeholder="验证码" class="wd_50 ub" :value="this.$store.state.forgetPd.yzm" @input="yzmChange">
      <div class="yzm ub-f1" @click="getyzm" v-show="timmer<=0">{{getYzm_text}}</div>
      <div class="yzm ub-f1 tx-r" v-show="timmer >0">{{timmer}}秒</div>
    </div>
    <div></div>
  </div>
</template>
<script type="text/ecmascript-6">
// import headerDiv from 'components/header/header.vue';
const MES = 0;
export default {
  name: 'forgetPd',
  data: function () {
    return {
      timmer: 0
    }
  },
  props: {
    getYzm_text: { // 验证码显示文字
      type: String
    },
    yzmType: { // 语音还是短信
      type: Number
    },
    optType: { // 验证码类型
      type: String
    }
  },
  created: function () {
    console.log('init');
    let nowType = this.optType;
    let storeType = this.$store.state.forgetPd.optType;
    if (nowType !== storeType) {
      this.$store.commit('clearBoth');
    }
    this.$store.commit('changeOpyType', nowType);
    console.log(this.$store.state.forgetPd.optType);
  },
  methods: {
    checkPho: function () {
      let pho = this.$store.state.forgetPd.phone;
      let phoReg = /^1\d{10}$/;
      if (!phoReg.test(pho)) {
        this.$store.dispatch('showTx', { text: '请输入正确的手机号' });
        return false;
      }
      return pho;
    },
    checkYzm: function () {
      let yzm = this.$store.state.forgetPd.yzm;
      let yzmReg = /^\d{6}$/;
      if (!yzmReg.test(yzm)) {
        this.$store.dispatch('showTx', { text: '请输入正确的验证码' });
        return false;
      }
      return yzm;
    },
    clearClick: function () {
      // console.log('123');
      this.$store.commit('clearPh');
    },
    getyzm: function () { // 获取验证码
      // if (this.timmer > 0) {
      //   this.$store.dispatch('showTx', { text: this.timmer + '秒后可发送短信' });
      //   return false;
      // }
      let self = this;
      let pho = this.checkPho();
      if (!pho) {
        return false;
      }
      // console.log('yzm');
      // let timestamp = new Date().getTime() + '';
      let content = {
        'optType': this.optType, // 3忘记密码 2找回密码
        'userMobile': pho
      }
      let data = this.$utils.getUserContent(content);
      this.$store.commit('showLoading');
      let sms = (this.yzmType === MES) ? 'smsLogin' : 'sendVoice';
      // console.log(this.$RS[sms]);
      // return false;
      this.$http.post(this.$RS[sms], data).then(
        function (res) {
          // 响应成功回调
          this.$store.commit('closePop');
          res = res.body;
          console.log(res);
          if (res.code === 1000) {
            self.timmer = 120;
            self.setTimer(this.timmer);
            self.$store.dispatch('showTx', { text: '验证码获取成功' });
            // this.$store.commit('setLogin', userInfo);
          } else {
            console.log('out');
            this.$store.dispatch('showTx', { text: res.message });
            this.timmer = 0;
          }
        },
        function (err) {
          console.log(err);
          // 响应错误回调
          this.$store.commit('closePop');
          this.$store.dispatch('showTx', { text: err.message || '网络错误，请重试' });
          this.timmer = 0;
        }
      );
    },
    yzmChange: function (e) {
      this.$store.commit('changeYzm', e.target.value);
    },
    phoneChange: function (e) {
      // console.log(e.target.value);
      this.$store.commit('changePhone', e.target.value);
      // this.$store.state.forgetPd.phone = e.target.value;
    },
    setTimer: function () {
      let me = this;
      let timeKiller = setInterval(function () {
        // console.log(me.timmer);
        me.timmer--;
        if (me.timmer <= 0) {
          clearInterval(timeKiller);
          timeKiller = null;
        }
      }, 1000)
    }
  },
  computed: {
  }
}
</script>

<style lang="stylus">
@import '../../stylus/base.styl';
.yzm
  color: #f8bb5a;
.bg_w
  background-color: #fff;
.innerBox > div
  background-color: #eee;
</style>